import React, { Component } from 'react'
import './loading.scss'

export default class loading extends Component {

    componentWillReceiveProps (){
        console.log(this.props);
    }

  render() {
    return (
      <div className='loading' hidden={this.props.show}>

            <div id="loading1" hidden={this.props.num !== 1}>
                <div id="loading-center">
                <div id="loading-center-absolute">
                <div id="object"></div>
                </div>
                </div>
            </div>

            <div id="loading2" hidden={this.props.num !== 2}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_five"></div>
                        <div className="object" id="object_six"></div>
                        <div className="object" id="object_seven"></div>
                        <div className="object" id="object_eight"></div>
                        <div className="object" id="object_big"></div>
                    </div>
                </div>
            
            </div>

            <div id="loading3" hidden={this.props.num !== 3}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="first_object"></div>
                        <div className="object" id="second_object"></div>
                        <div className="object" id="third_object"></div>

                    </div>
                </div>
            </div>

            <div id="loading4" hidden={this.props.num !== 4}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="first_object"></div>
                        <div className="object" id="second_object"></div>
                        <div className="object" id="third_object"></div>
                        <div className="object" id="forth_object"></div>
                    </div>
                </div>
            
            </div>


            <div id="loading5" hidden={this.props.num !== 5}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_five"></div>
                        <div className="object" id="object_six"></div>
                        <div className="object" id="object_seven"></div>
                        <div className="object" id="object_eight"></div>
                        <div className="object" id="object_nine"></div>
                    </div>
                </div>
            </div>

            <div id="loading6" hidden={this.props.num !== 6}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_five"></div>
                        <div className="object" id="object_six"></div>
                        </div>
                </div>
            </div>

            <div id="loading7" hidden={this.props.num !== 7}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                    </div>
                </div>
            </div>

            <div id="loading8" hidden={this.props.num !== 8}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                    </div>
                </div>
            </div>


            <div id="loading9" hidden={this.props.num !== 9}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_big"></div>
                    </div>
                </div>
            </div>

            <div id="loading10" hidden={this.props.num !== 10}>
                <div id="loading-center">
                    <div id="loading-center-absolute-one">
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                    </div>
                    <div id="loading-center-absolute-two">
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                    </div>
                </div>
                
            </div>


            <div id="loading11" hidden={this.props.num !== 11}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                    </div>
                </div>
            </div>


            <div id="loading12" hidden={this.props.num !== 12}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_five"></div>
                        <div className="object" id="object_six"></div>
                        <div className="object" id="object_seven"></div>
                        <div className="object" id="object_eight"></div>
                        <div className="object" id="object_big"></div>
                    </div>
                </div>
            </div>

            <div id="loading13" hidden={this.props.num !== 13}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="first_object"></div>
                        <div className="object" id="second_object" style={{float:"right"}}></div>
                    </div>
                </div>
            </div>

            <div id="loading14" hidden={this.props.num !== 14}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                    </div>
                </div>
            </div>

            <div id="loading15" hidden={this.props.num !== 15}>
                <div id="loading-center">
                    <div id="loading-center-absolute-one">
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                        <div className="object-one"></div>
                    </div>
                    <div id="loading-center-absolute-two">
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                        <div className="object-two"></div>
                    </div>
                </div>
            </div>

            <div id="loading16" hidden={this.props.num !== 16}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                    </div>
                </div>
            </div>

            <div id="loading17"  hidden={this.props.num !== 17}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                    </div>
                </div>
            </div>

            <div id="loading18" hidden={this.props.num !== 18}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                    <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_five"></div>
                    </div>
                </div>
            </div>

            <div id="loading19" hidden={this.props.num !== 19}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_five"></div>
                        <div className="object" id="object_six"></div>
                        <div className="object" id="object_seven"></div>
                        <div className="object" id="object_eight"></div>
                        <div className="object" id="object_nine"></div>
                    </div>
                </div>
            </div>

            <div id="loading20" hidden={this.props.num !== 20}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_five"></div>
                        <div className="object" id="object_six"></div>
                        <div className="object" id="object_seven"></div>
                        <div className="object" id="object_eight"></div>
                    </div>
                </div>
            </div>

            <div id="loading21" hidden={this.props.num !== 21}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                    </div>
                </div>
            </div>

            <div id="loading22" hidden={this.props.num !== 22}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_one"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_four"></div>
                    </div>
                </div>
            </div>

            <div id="loading23" hidden={this.props.num !== 23}>
                <div id="loading-center">
                <div id="loading-center-absolute">
                    <div className="object" id="object_one"></div>
                </div>
                </div>
            </div>


            <div id="loading24" hidden={this.props.num !== 24}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                    </div>
                </div>
            </div>

            <div id="loading25" hidden={this.props.num !== 25}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                    </div>
                </div>
            </div>

            <div id="loading26" hidden={this.props.num !== 26}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                    </div>
                </div>
            </div>

            <div id="loading27" hidden={this.props.num !== 27}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_one"></div>
                    </div>
                </div>
            </div>

            <div id="loading28" hidden={this.props.num !== 28}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object" id="object_four"></div>
                        <div className="object" id="object_three"></div>
                        <div className="object" id="object_two"></div>
                        <div className="object" id="object_one"></div>
                    </div>
                </div>
            </div>

            <div id="loading29" hidden={this.props.num !== 29}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                    </div>
                </div>
            </div>

            <div id="loading30" hidden={this.props.num !== 30}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                        <div className="object"></div>
                    </div>
                </div>
            </div>

            <div id="loading31" hidden={this.props.num !== 31}>
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div className="object"></div>
                        {/* <div className="o2"></div>
                        <div className="o3"></div> */}
                    </div>
                </div>
            </div>


      </div>
    )
  }
}
